<template>
  <div class="selectBridge">
    <vx-popup
      title="桥梁选择"
      width="910px"
      @close="handleClose"
      :active.sync="visible"
      @confirmPopup="handleOkSubmit"
      @cancelPopup="handleCancelSubmit"
    >
      <div class="content">
        <div class="content-left">
          <!--  省市  -->
          <el-tree
            :load="loadNode"
            node-key="id"
            ref="tree"
            highlight-current
            lazy
            accordion
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
        <div class="content-right" v-if="bridgeList.length > 0">
          <!-- 区- 桥 -->
          <div class="line-content" v-for="(item,key) in bridgeList" :key="key">
            <p class="title">{{item.name}}</p>
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="(i) in item.dataInfo" :key="i.id" :label="i.id">{{i.name}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="content-right" v-if="bridgeList.length == 0">
          <!-- 区- 桥 -->
          <p class="tip">请选择省/市...</p>
        </div>
      </div>
    </vx-popup>
  </div>
</template>

<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";
export default {
  data() {
    return {
      visible: false,
      settings: {
        // perfectscrollbar settings
        maxScrollbarLength: 30,
        wheelSpeed: 1,
        swipeEasing: true,
      },
      data: [],
      defaultProps: {
        children: "children",
        label: "simpleName",
        isLeaf: "leaf",
      },
      bridgeList: [],
      checkList: [],
      bridgeListDetail: [],
    };
  },
  components: {},
  props: {},
  mounted() {
    this.queryBridgeRegion();
  },
  methods: {
    handleNodeClick(data) {
      if (data.leaf) {
        // 根据市查询所有桥梁
        this.$api.bridge
          .AllTheBridges({
            municipalityCode: data.regionCode,
          })
          .then((res) => {
            let data = res.data.data[0];
            let tempArr = [];
            let Data = [];

            data.map((item, key) => {
              if (tempArr.indexOf(item.regionName) === -1) {
                Data.push({
                  name: item.regionName,
                  dataInfo: [item],
                });
                tempArr.push(item.regionName);
              } else {
                Data.map((i, k) => {
                  if (i.name == item.regionName) {
                    i.dataInfo.push(item);
                  }
                });
              }
            });
            this.bridgeList = Data;
          });
      }
    },
    init() {
      this.visible = true;
      this.bridgeListDetail = [];
      this.checkList = [];
    },
    handleClose() {
      this.visible = false;
    },
    handleOkSubmit() {
      this.visible = false;
      this.bridgeListDetail = [];
      let data = this.checkList;
      let bridgeListDetail = [];
      // 获取所有桥梁
      if (data.length > 0) {
        this.$api.mearsuringPointSetting.getBridgeAll().then((res) => {
          let birdgeListAll = res.data.data[0];
          data.map((item, key) => {
            birdgeListAll.map((i, k) => {
              if (item == i.id) {
                bridgeListDetail.push(i);
              }
            });
          });

          this.bridgeListDetail = bridgeListDetail;
          this.$emit("getData", this.bridgeListDetail);
        });
      } else {
        //   this.$emit
      }
    },
    handleCancelSubmit() {
      this.visible = false;
    },

    // 查询省市区
    queryBridgeRegion(id = "100000") {
      this.$api.bridge
        .queryBridgeRegion({
          parentId: id,
        })
        .then((res) => {
          this.data = res.data.data;
        });
    },
    // 异步树叶子节点懒加载逻辑
    loadNode(node, resolve) {
      console.log(node);
      console.log(resolve);
      // 一级节点处理
      if (node.level === 0) {
        console.log(0);
      }
      // 其余节点处理
      if (node.level === 1) {
        // 注意！把resolve传到你自己的异步中去
        this.getIndex(node, resolve);
      }
      if (node.level > 1) {
        // 注意！把resolve传到你自己的异步中去
        resolve([]);
      }
    },
    // 异步加载叶子节点数据函数
    getIndex(node, resolve) {
      this.$api.bridge
        .queryBridgeRegion({
          parentId: node.data.regionCode,
        })
        .then((res) => {
          // 设置不是叶子节点
          let data = res.data.data;
          data.map((item, key) => {
            item.leaf = true;
          });
          resolve(data);
        });
    },
  },
  watch: {
    // checkList: {
    //   handler(newVal) {
    //     // console.log(newVal);
    //   },
    //   deep: true,
    //   immediate: true,
    // },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-tree {
  background: #f5f6fa !important;
  padding: 15px;
}
/deep/.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #fff !important;
  height: 36px !important;
}
/deep/.el-tree-node__content{
    height: 36px !important;
}
/deep/.el-checkbox__input.is-checked+.el-checkbox__label{}

.content {
  width: 800px;
  height: 440px;
  border: 1px solid #d9dce4;
  .content-left {
    width: 220px;
    height: 438px;
    overflow: auto;
    // padding: 5px 10px;
    box-sizing: border-box;
    background: #f5f6fa;
  }
  .content-right {
    width: 550px;
    height: 440px;
    overflow: auto;
  }
}
.carComparison-scroll {
  height: 440px;
  overflow: auto;
}

// 自定义滚动条样式
.content-left::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.content-left::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #bec4d0;
}
.content-left::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: transparent;
}

.content-right::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.content-right::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #bec4d0;
}
.content-right::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background: transparent;
}
.line-content {
  padding: 15px 25px;
  box-sizing: border-box;
  width: 95%;
  border-bottom: 1px solid #d8dfed;
  .title {
    color: #327bdc;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
.list-init {
  margin-bottom: 10px;
}
.tip {
  text-align: center;
  margin-top: 40%;
}
</style>
